import React, { Component } from 'react'
import '@/css/Login.css';
import WsjCheckBox from '@/comps/WsjCheckBox.js'
import { HashRouter, BrowserRouter, Switch, Route, Link, NavLink } from "react-router-dom";

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            bBtnSubmitIcon:false,
            bCatEyesClose: false,
            regIpt: false,
            btnText:'立 即 登 录'
        }
    }
 
  render() {
        //高阶组件
        //https://juejin.im/post/5d1037966fb9a07ee4636de3?utm_source=gold_browser_extension
        let { username,password,bBtnSubmitIcon,bCatEyesClose,regIpt,btnText } = this.state
        return (
            <div className="bg-login">
            <img src={require('../img/logo.png')} className="logo" />
            <div style={{ height: "30px"}}></div>
                {/* <div className="slogan font20"></div> */}
                <div className={['cat-eyes-open',bCatEyesClose && 'cat-eyes-close'].join(' ')}>
                    <div className="login-wrap">
                        <div className="yt yt-pj yt-ac opt-desc">
                            <div className="login-type">密码登录</div>
                            <div><Link to="/registry"  className="go-path">没有账号?点此注册</Link></div>
                        </div>

                        <div className="yt yt-ac login-wrap-ipt">
                            <i className="alifont font16">&#xe623;</i>
                            <input ref={e => this.refUserName = e} type="text" className="yt-f1 font16 login-ipt" defaultValue={username} onChange={this.handleUserName} placeholder="请输入用户名" />
                        </div>
                        <div className="yt yt-ac login-wrap-ipt">
                            <i className="alifont font16">&#xe619;</i>
                            <input ref={e => this.refPassWord = e} type="password" className="yt-f1 font16 login-ipt" defaultValue={password} onChange={this.handlePassWord} onFocus={this.handleFocusPsw} onBlur={() => this.handleFocusPsw('blur')} placeholder="请输入密码" />
                        </div>
                        
                        <div className="yt yt-pj yt-ac forgetpsw">
                            <WsjCheckBox name='rememberlogin' val="1" text="30天免登录" style={{ fontSize: "0.14rem" }} checked={true} cb={this.getRemember}  />
                            <Link to="/registry">忘记密码</Link>
                        </div>
                        <button onTouchStart={() => { }} className={['btn-login',regIpt?'':'c-disabled'].join(' ')} onClick={this.handleSubmit}>
                            {bBtnSubmitIcon?<i className="alifont font16 anim-rotate360">&#xe861;</i>:null}
                            <span className="font16" style={{ marginLeft:'5px' }}>{bBtnSubmitIcon?'登录中...':btnText}</span>
                        </button>
                    </div>
                </div>
            </div>
        )
    }
    handleUserName = (e) => { 
        this.setState({
            username:e.target.value
        })
        this.regIpt()
    }
    handlePassWord = (e) => { 
            this.setState({
                password:e.target.value
            })
            this.regIpt()
    }
    regIpt = () => { 
        var usernamePattern = /^[a-zA-Z_][a-zA-Z0-9_-]{3,15}$/
        var passwordPattern = /^.{4,16}$/
        var uname=this.refUserName.value
        var upassword = this.refPassWord.value
        if (usernamePattern.test(uname) && passwordPattern.test(upassword)) this.setState({ regIpt:true })
        else this.setState({ regIpt:false })
    }
    handleFocusPsw = (e) => { 
        if(e==='blur') this.setState({bCatEyesClose:false})
        else this.setState({bCatEyesClose:true})
    }
    
    handleSubmit =async () => {
        let { bBtnSubmitIcon, regIpt } = this.state
        if (regIpt && !bBtnSubmitIcon) { 
            this.setState({
                bBtnSubmitIcon:true
            })
            //此处发送请求
            var res = await React.$axios.post(React.$api.login, {
              username:this.state.username,
              password:this.state.password
            })
            this.setState({
              bBtnSubmitIcon:false
            })
            if (res.errCode != 1) {
              alert('登录失败')
              return
            } 
            var docCookies=React.$docCookies
          var config = React.$config
            docCookies.setItem(config.COOKIEJWTNAME, res.data.jwt, docCookies.addTime({ day: config.COOKIETIME }))
        } 
    }
     getRemember=(e)=>{
        console.log('Login.js::来自WsjCheckBox的回调',e)
     }
}
export default Login